<template>
  <div class="categoryDetail-container">
    <div class="header">
      <van-nav-bar
        title="分类"
        left-text="返回"
        left-arrow
        @click-left="$router.back()"
      />
    </div>

    <div class="header-nav">
      <van-tabs
        color="#CEA62A"
        title-active-color="#333333"
        v-model="activeName"
      >
        <van-tab
          v-for="item in navdata.navData"
          :title="item.name"
          :key="item.id"
          title-class="active"
          :name="item.name"
        >
          <div class="nav-content">
            <div class="text">
              <p class="title">{{ item.name }}</p>
              <p class="desc">{{ item.front_desc }}</p>
            </div>
            <ul class="good-category-list" v-if="(listdata.data || []).length">
              <li
                v-for="card in listdata.data"
                :key="card.id"
                @click="$router.push(`/goodsDetail?id=${card.id}`)"
              >
                <van-image
                  lazy-load
                  :src="card.list_pic_url"
                  class="lazy-img"
                />
                <!-- <img :src="card.list_pic_url" alt="" /> -->
                <div class="good-list-text">
                  <p class="title">{{ card.name }}</p>
                  <p class="price">&yen; {{ card.retail_price }}</p>
                </div>
              </li>
            </ul>
            <div class="blank" v-else>数据库没有数据...</div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import { categoryNav, goodsList } from "@/api/Category";
export default {
  data() {
    return {
      navdata: {},
      listdata: {},
      activeName: "",
    };
  },
  methods: {
    async getnav(id = this.$route.query.id) {
      let res = await categoryNav({ id });
      this.navdata = res;
      let res2 = await goodsList({ categoryId: this.navdata.currentNav.id });
      this.listdata = res2;
    },
  },
  watch: {
    activeName: {
      async handler(name) {
        let id =
          this.navdata &&
          this.navdata.navData &&
          this.navdata.navData.find((item) => item.name == name).id;
        let res2 = await goodsList({ categoryId: id });
        this.listdata = res2;
      },
    },
  },
  mounted() {
    this.activeName = this.$route.query.name;
    this.getnav();
  },
};
</script>

<style scoped lang='scss'>
.categoryDetail-container {
  padding-bottom: 80px;
  background-color: #f8f8f8;
  overflow: auto;
  height: calc(100vh - 108px);
  .header {
    height: 50px;
    width: 100%;
    position: fixed;
    z-index: 9999;
    top: 107px;
    left: 0;
  }
  .header-nav {
    height: 90px;
    margin-top: 50px;
    .van-tabs,
    .van-tabs__wrap {
      height: 100%;
    }
    .active {
      font-size: 28px;
      color: #666666;
      letter-spacing: 0;
      font-weight: 400;
    }
    .nav-content {
      padding: 26px 20px 0 20px;
      .text {
        height: 150px;
        border: 1px solid rgba(235, 220, 173, 1);
        background-color: #f9f4e5;
        padding: 29px 0 32px 0;
        text-align: center;
        margin-bottom: 26px;
        .title {
          font-size: 32px;
          color: #000000;
          letter-spacing: 0;
          font-weight: 500;
        }
        .desc {
          font-size: 28px;
          color: #666666;
          letter-spacing: 0;
          font-weight: 400;
        }
      }
      .good-category-list {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        li {
          height: 490px;
          width: 350px;
          .good-list-text {
            height: 140px;
            padding-top: 17px;
            text-align: left;
            .title {
              font-size: 26px;
              color: #333333;
              letter-spacing: 0;
              font-weight: 500;
              margin-bottom: 5px;
              @include dot;
            }
            .price {
              font-size: 26px;
              color: #9e4242;
              letter-spacing: 0;
              font-weight: 400;
            }
          }
        }
      }
      .blank {
        text-align: center;
        font-size: 14px;
        color: #000;
      }
    }
  }
}
</style>

<style lang="scss" >
.categoryDetail-container {
  .van-nav-bar {
    height: 100%;
    .van-nav-bar__content {
      height: 100%;
    }
    .van-nav-bar__text {
      font-size: 31.2px;
      color: #666666;
      letter-spacing: 0;
      font-weight: 400;
    }
    .van-icon {
      width: 30px;
      height: 30px;
      color: #000;
    }
  }
  .good-category-list {
    img {
      width: 350px;
      height: 350px;
      background-color: #fff;
    }
  }
}
</style>